<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../../asset/css/common.css">
    <link rel="stylesheet" href="../../asset/css/pageStyle.css">
    <link rel="stylesheet" href="../../asset/css/style.css">
    <script src="../../asset/js/avalon.js"></script>
    <script src="http://mockjs.com/dist/mock.js"></script>
    <title>产品中心</title>
</head>
<body>
<ms-header></ms-header>
<div class="container">
    <div class="productCenter" ms-controller="proList">
        <div class="breadCrumbs">
            <span><a href="../index/index.html">首页</a> > <a href="../index/serviceSupport/index.html">服务与支持</a> > </span><span class="current">产品中心</span>
        </div>
        <div class="main">
            <div class="left-menu">
                <ul>
                    <li ms-for="el in @menuList" data-for-rendered='@tnTab'>
                        <a href="javascript:;" ><span ms-html="el.name">酒店管理系统</span><span class="icon-rightTip"></span></a>
                        <div  ms-class="['seriesList',@isseries?'':'']">
                            <a href="javascript:;" ms-for="submenu in el.sub" ms-click="@refreshProList(submenu.name)"> <span ms-html="submenu.name">JTD天地杆防盗锁芯系列</span></a>
                            <!--<a href="javascript:;"> <span>JTD天地杆防盗锁芯系列</span></a>
                            <a href="javascript:;"> <span>JTD天地杆防盗锁芯系列</span></a>-->
                        </div>
                    </li>
                    <!--<li>-->
                        <!--<a href="javascript:;">房地产专用指纹防盗锁<span class="icon-rightTip"></span></a>-->
                        <!--<div class="seriesList">-->
                            <!--<a href="javascript:;"> <span>JTD天地杆防盗锁芯系列</span></a>-->
                            <!--<a href="javascript:;"> <span>JTD天地杆防盗锁芯系列</span></a>-->
                            <!--<a href="javascript:;"> <span>JTD天地杆防盗锁芯系列</span></a>-->
                        <!--</div>-->
                    <!--</li>-->
                    <!--<li>-->
                        <!--<a href="javascript:;">零售产品<span class="icon-rightTip"></span></a>-->
                    <!--</li>-->
                    <!--<li>-->
                        <!--<a href="javascript:;">办公门锁<span class="icon-rightTip"></span></a>-->
                    <!--</li>-->
                </ul>
            </div>
            <div class="right-container">
                <div class="tnTabContent current">
                    <div class="inputArea">
                        <div class="group">
                            <label for="">产品名称：</label>
                            <input type="text" ms-duplex='@proName'>
                        </div>
                        <div class="group">
                            <label for="">产品分类：</label>
                            <select ms-duplex='@category'>
                                <option ms-for="el in @classify" ms-html="el.name">Volvo</option>
                                <!--<option value="saab">Saab</option>
                                <option value="opel">Opel</option>
                                <option value="audi">Audi</option>-->
                            </select>
                        </div>
                        <div class="group">
                            <label for="">使用场所：</label>
                            <select ms-duplex="@usePlace">
                                <option ms-for="el in @place"  ms-html="el.label" >Volvo</option>
                                <!--<option value="saab">Saab</option>
                                <option value="opel">Opel</option>
                                <option value="audi">Audi</option>-->
                            </select>
                        </div>
                    </div>
                    <div class="unlockMode">
                        <label for="">开锁方式：</label>
                        <form action="" method="get">
                            <label ms-for="el in @unlockMode"><input name="mode" type="radio" value=""/><span ms-html="el.label">指纹</span></label>
                            <!--<label><input name="mode" type="radio" value=""/>密码 </label>-->
                            <!--<label><input name="mode" type="radio" value=""/>磁卡</label>-->
                            <!--<label><input name="mode" type="radio" value=""/>IC卡 </label>-->
                            <!--<label><input name="mode" type="radio" value=""/>IM卡 </label>-->
                            <!--<label><input name="mode" type="radio" value=""/>无限遥控 </label>-->
                            <!--<label><input name="mode" type="radio" value=""/>机械钥匙 </label>-->
                            <!--<label><input name="mode" type="radio" value=""/>指纹卡 </label>-->
                            <!--<label><input name="mode" type="radio" value=""/>虹膜 </label>-->
                        </form>
                    </div>
                    <div class="hasSelect">
                        <label for="">已选条件：</label>
                        <p><span>磁卡</span><span class="icon-close"></span></p>
                        <button ms-click="getProListData()">点我</button>
                    </div>
                    <div class="panelList">
                        <div class="panel" ms-for="el in @proList.product">
                            <a ms-click="@goContent(el.id)">
                                <div><img ms-attr="{src: el.image}" alt=""></div>
                                <ul>
                                    <li class="text" ms-html="el.name">ADEL US99家庭大门指纹防盗锁(指纹+12键密码+感应卡)</li>
                                    <li>适用场所：<span ms-for="place in el.placeName" ms-html="place">家庭大门</span></li>
                                    <li>可选颜色：<span ms-for="color in el.colourName" ms-html="color">古铜色 土豪金 亚铬色</span></li>
                                    <li class="style">
                                        <span>开锁方式：</span>
                                        <span ms-for="type in el.unlockTypeName" ms-class="[type=='指纹'?'icon-fingerprint':(type=='扫码'?'icon-lock':(type=='刷卡'?'icon-car':(type=='钥匙'?'icon-key':'hidden')))]" ></span>
                                        <!--<span ms-class="['icon-car',el.style.length>=3?'':'hidden']"></span>
                                        <span ms-class="['icon-key',el.style.length>=4?'':'hidden']"></span>-->
                                    </li>
                                </ul>
                            </a>
                        </div>
                        <!--<div class="panel">
                            <div><img src="../../asset/images/lock.png" alt=""></div>
                            <ul>
                                <li class="text">ADEL US99家庭大门指纹防盗锁(指纹+12键密码+感应卡)</li>
                                <li>适用场所：家庭大门 家庭房门 办公室门 总经理办公室门 财务室门 药品库门 政府机要室门 武器库门 别墅大门</li>
                                <li>可选颜色：古铜色 土豪金 亚铬色</li>
                                <li class="style">
                                    <span>开锁方式：</span>
                                    <span class="icon-fingerprint"></span>
                                    <span class="icon-lock"></span>
                                    <span class="icon-car"></span>
                                    <span class="icon-key"></span>
                                </li>
                            </ul>
                        </div>
                        <div class="panel">
                            <div><img src="../../asset/images/lock.png" alt=""></div>
                            <ul>
                                <li class="text">ADEL US99家庭大门指纹防盗锁(指纹+12键密码+感应卡)</li>
                                <li>适用场所：家庭大门 家庭房门 办公室门 总经理办公室门 财务室门 药品库门 政府机要室门 武器库门 别墅大门</li>
                                <li>可选颜色：古铜色 土豪金 亚铬色</li>
                                <li class="style">
                                    <span>开锁方式：</span>
                                    <span class="icon-fingerprint"></span>
                                    <span class="icon-lock"></span>
                                    <span class="icon-car"></span>
                                    <span class="icon-key"></span>
                                </li>
                            </ul>
                        </div>
                        <div class="panel">
                            <div><img src="../../asset/images/lock.png" alt=""></div>
                            <ul>
                                <li class="text">ADEL US99家庭大门指纹防盗锁(指纹+12键密码+感应卡)</li>
                                <li>适用场所：家庭大门 家庭房门 办公室门 总经理办公室门 财务室门 药品库门 政府机要室门 武器库门 别墅大门</li>
                                <li>可选颜色：古铜色 土豪金 亚铬色</li>
                                <li class="style">
                                    <span>开锁方式：</span>
                                    <span class="icon-fingerprint"></span>
                                    <span class="icon-lock"></span>
                                    <span class="icon-car"></span>
                                    <span class="icon-key"></span>
                                </li>
                            </ul>
                        </div>
                        <div class="panel">
                            <div><img src="../../asset/images/lock.png" alt=""></div>
                            <ul>
                                <li class="text">ADEL US99家庭大门指纹防盗锁(指纹+12键密码+感应卡)</li>
                                <li>适用场所：家庭大门 家庭房门 办公室门 总经理办公室门 财务室门 药品库门 政府机要室门 武器库门 别墅大门</li>
                                <li>可选颜色：古铜色 土豪金 亚铬色</li>
                                <li class="style">
                                    <span>开锁方式：</span>
                                    <span class="icon-fingerprint"></span>
                                    <span class="icon-lock"></span>
                                    <span class="icon-car"></span>
                                    <span class="icon-key"></span>
                                </li>
                            </ul>
                        </div>-->
                    </div>
                </div>
                <div class="tnTabContent">我是2</div>
                <div class="tnTabContent">我是3</div>
            </div>
        </div>
    </div>
    <ms-service></ms-service>
</div>
<ms-footer></ms-footer>
<script src="../../asset/js/jquery-2.1.4.js"></script>
<script src="../../asset/js/ajaxUtils.js"></script>
<script src="../../asset/js/ff/ff.res.js"></script>
<script src="../../asset/js/common.js"></script>
<script src="../../asset/js/component.js"></script>
<script src="../../asset/js/ff/ff.res.js"></script>
<script src="./js/index.js"></script>
</body>
</html>